<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>模块图片设置</title>
	<style type="text/css">
		.showshow img{
			height:220px;
		}
		.widget-header .indexshow{
		display:inline-block;
		background-color:grey !important;
		border:4px solid grey !important;
		}
		.widget-header  .indexshow:hover{
		background-color:black !important;
		}
	</style>
</head>

<body>
<div id="content" layout:fragment="content">
<script type="text/javascript">
	$(function(){
 		/* $('file').ace_file_input({
            no_file: '没有文件 ...',
            btn_choose: 'Choose',
            btn_change: 'Change',
            droppable: false,
            onchange: null,
            thumbnail: false
        });  */
/*         
		$(".edit1").click(function (e) {
			debugger
            e.preventDefault();
            
            if ($("#id_1_file_1").val() == "") {
            	alert("请选择一个图片文件，再点击上传。");
            	return;
            }
            $('#id_1_fileForm1').ajaxSubmit(function (date, res, me) {
                if (date.suc) {
                	$("#id_1_img_1").html("<img src="+date.img+"/>");
                	$("#id_1_imgPath_1").attr("value",date.imgPath);
                    alert("保存成功了！");
                } else {
                    alert("保存失败了！" + date.msg);
                }
        	});
        }); */
        
        
	});
	
	function selectChange(a){
		if($("#id_"+a+"_select").val()==""){
			$("#div_"+a+"_1").hide();
			$("#div_"+a+"_2").show();
			$("#change"+a).attr("value",2);
			$("#table_tbody_1_2").html("");
			return false;
		}
		var teId = $("#demo_templateId_"+a+"_1").val();
		var templateId = $("#id_"+a+"_select").val();
		var num = $("#id_"+a+"_select option[value="+templateId+"]")[0].attributes.name.value;
		if(teId == templateId){
			$("#div_"+a+"_2").hide();
			$("#div_"+a+"_1").show();
			$("#change"+a).attr("value",1);
			return true;
		} else{
			$("#div_"+a+"_1").hide();
			$("#div_"+a+"_2").show();
			$("#change"+a).attr("value",2);
		}
		
		$("#demo_num_"+a+"_2").attr("value",num);
		$("#demo_templateId_"+a+"_2").attr("value",templateId);
		
		var obj = "";
		$("#table_tbody_"+a+"_2").html("");
		for(var i=1;num>=i;i++){
			var j=i-1;
			var tr = $('<tr ></tr>');
			
  		   	var from = $('<form action="/imgStorage/imageUpload.json" method="post" enctype="multipart/form-data"></form>');
  		   	from.attr("id","id_1_fileForm2"+i);
  		   
  		   	var td1 = $('<td style="text-align: center;">'+i+'</td>');
  		    tr.append(td1);
  		  	
  		    var td2 = $('<td style="text-align: center;" ></td>');
  		    td2.attr("id","id_img_2"+i);
  		    tr.append(td2);
  		    
/*   		    var td3 = $('<td class="center" ></td>');
		  	var sel3 = $('<select></select>');
		  	sel3.attr("id","id_teamId_2"+i);
		  	sel3.attr("name","teamId"+i);
		  	td3.append(sel3);
		  	tr.append(td3); */
         	
		  	var td4 = $('<td class="center" ></td>');
		  	var inp4 = $('<input type="text" value="" style="width: 100px" />');
		  	inp4.attr("id","id_clickNum_2"+i);
		  	inp4.attr("name","clickNum"+i);
		  	td4.append(inp4);
		  	tr.append(td4);
		  	
		  	var td5 = $('<td class="center" ></td>');
		  	var inp5 = $('<textarea type="text" value=""/>');
		  	inp5.attr("id","id_mark_2"+i);
		  	inp5.attr("name","mark"+i);
		  	td5.append(inp5);
		  	tr.append(td5);
		  	
		  	var td6 = $('<td class="center" ></td>');
		  	var inp6 = $('<input type="file" name="file" />');
		  	inp6.attr("id","id_file_2"+i);
		  	from.append(inp6);
		  	td6.append(from);
		  	tr.append(td6);
		  	
		  	var td7 = $('<td class="center" ></td>');
		  	var inp7 = $('<a class="editbtn btn btn-info btn-small edit1" style="width: 26px;" >上传</a>');
		  	inp7.attr("onclick","upload(2,"+i+")");
		  	td7.append(inp7);
		  	tr.append(td7);
		  	
		  	var td8 = $('<td class="center" style="display: none;"></td>');
		  	var inp8 = $('<input type="hidden" value=""/>');
		  	inp8.attr("id","id_imgPath_2"+i);
		  	inp8.attr("name","imgPath"+i);
		  	td8.append(inp8);
		  	tr.append(td8);
  		  
  		  	$("#table_tbody_1_2").append(tr);
		}
	}
	
	function insertOrUpdate(a){
		var num = $("#demo_num_1_"+a).val();
		if(num != 0){
			 for(var i=1;num>=i;i++){
				if($("#id_clickNum_"+a+i).val()==""){
					alert("您有点击数没有填写!");
					return false;
				} else if(!IsNum($("#id_clickNum_"+a+i).val())){
					alert("点击数请填写正整数!");
					return false;
				}
				if($("#id_mark_"+a+i).val()==""){
					alert("您有简介没有填写!");
					return false;
				}
				if($("#id_imgPath_"+a+i).val()==""){
					alert("您有图片没有上传!");
					return false;
				}
			} 
			$('#id_1_'+a+'_insertForm').attr("action","/imgStorage/insert.json");
			$('#id_1_'+a+'_insertForm').ajaxSubmit(function (date, res, me) {
	            if (date.suc) {
	                alert("保存成功了！");
	                window.location.href = "/imgModel/list.htm";
	            } else {
	                alert("保存失败了！" + date.msg);
	            }
	    	});
		} else{
			alert("没有需要保存的数据！");
		}
	}
	
	function upload(a,num){
		if ($("#id_file_"+a+num).val() == "") {
        	alert("请选择一个图片文件，再点击上传。");
        	return;
        }
        $("#id_1_fileForm"+a+num).ajaxSubmit(function (date, res, me) {
            if (date.suc) {
            	var img = $("<img />");
            	img.attr('src',date.img)
            	img.attr('style','height: 120px; width: 200px;')
            	$("#id_img_"+a+num).html(img);
            	$("#id_imgPath_"+a+num).attr("value",date.imgPath);
                alert("保存成功了！");
            } else {
                alert("保存失败了！" + date.msg);
            }
    	});
	}
	
	function showDemo(a){
		$('#id_1_'+a+'_insertForm').attr("action","/imgStorage/showIndex.htm");
		$('#id_1_'+a+'_insertForm').submit();
	}
	
    //正则验证数字
	function IsNum(num){
		 if(num != null){
			 if(/^[0-9]*$/.test(num)){
				 return true;
			 } else{
				 return false;
			 }
		 }
	 }
</script>

<div class="box-content">
    <div class="row-fluid sortable">
    	<div class="span6 widget-container-span" style=" width: 100%">
			<div class="widget-box">
				<div class="widget-header">
					<h5 class="smaller">模块图片设置</h5>
				</div>
	
				<div class="widget-body">
					<div class="widget-main padding-6">
						<div class="tab-content">
								 选择模版:&nbsp;&nbsp;
								<span th:if="${imgTemp != null}">
									<select onchange="selectChange(1)" id="id_1_select">
					                	<option value="">--请选择--</option>
					                    <option th:each="itl:${imgTempList}" th:value="${itl.id}" th:name="${itl.num}"
					                            th:text="${itl.name}" th:selected="${imgTemp.id == itl.id}"></option>
					                </select>
								</span>
								<span th:if="${imgTemp == null}">
									<select onchange="selectChange(1)" id="id_1_select">
					                	<option value="">--请选择--</option>
					                    <option th:each="itl:${imgTempList}" th:value="${itl.id}" th:name="${itl.num}"
					                            th:text="${itl.name}" ></option>
					                </select>
								</span>
				                <!-- <a href="javascript:void(0)" onclick="showDemo(1)" >模版展示</a> -->
				                <input id="change1" value="1" type="hidden"/>
				                <span th:if="${imgStorageList != null}">
					                <div id="div_1_1">
					                <form action="/imgStorage/insert.json" method="post" id="id_1_1_insertForm" enctype="multipart/form-data" target="_black">
					                <input type="hidden" id="demo_num_1_1" name="demo_num" th:value="${imgTemp.num}"/>
					                <input type="hidden" id="demo_templateId_1_1" name="tempId" th:value="${imgTemp.id}"/>
					                <input type="hidden" id="demo_modelId_1_1" name="modelId" th:value="${modelId}"/>
					                <div class="box-content" style="padding:0px;">
						                <table class="table table-striped table-bordered bootstrap-datatable datatable">
						                    <thead>
						                    <tr>
						                    	<th class="center" style="width: 10%"> 序号</th>
						                        <th class="center" style="width: 25%"> 图片展示</th>
						                       <!--  <th class="center" style="width: 15%"> 球队选择</th> -->
						                        <th class="center" style="width: 5%"> 点击数</th>
						                        <th class="center" style="width: 35%"> 简介</th>
						                        <th class="center" style="width: 15%"> 图片选择</th>
						                        <th class="center" style="width: 10%"> 图片上传</th>
						                    </tr>
						                    </thead>
						                    <tbody id="table_tbody_1_1">
						                    <tr th:each="imgStorage,indexStat:${imgStorageList}">
						                    	<form ></form>
							                	<td style="text-align: center;"><span th:text="${imgStorage.orderNum}"></span></td>
							                   	<td style="text-align: center;" th:id="${'id_img_1'+indexStat.count}"><img th:src="${imgStorage.imgPath}" style="height: 120px; width: 200px;" /></td>
							                   	<td class="center" >
							                   		<input type="text" style="width: 100px" th:name="${'clickNum'+indexStat.count}" th:id="${'id_clickNum_1'+indexStat.count}" th:value="${imgStorage.clickNum}"/>
							                   	</td>
							                   	<td class="center" >
							                   		<textarea type="text" th:name="${'mark'+indexStat.count}" th:id="${'id_mark_1'+indexStat.count}" th:text="${imgStorage.mark}"/>
							                   	</td>
							                    <td class="center" >
							                    	<form action="/imgStorage/imageUpload.json" method="post" th:id="${'id_1_fileForm1'+indexStat.count}" enctype="multipart/form-data">
							                        	<input type="file" th:id="${'id_file_1'+indexStat.count}" name="file" />
							                    	</form>
							                    </td>
							                    <td class="center" ><a class="editbtn btn btn-info btn-small edit1" style="width: 26px;" th:onclick="${'upload(1,'+indexStat.count+')'}">上传</a></td>
							                	<td class="center" style="display: none;"><input type="hidden" th:id="${'id_imgPath_1'+indexStat.count}" th:name="${'imgPath'+indexStat.count}" th:value="${imgStorage.imgPath}"/></td>
						                    </tr>
						                    
						                    </tbody>
							                
						                </table>
						                <input type="button" onclick="insertOrUpdate(1)" class="btn btn-primary" value="保存" />
						            </div>
						            </form>
						            </div>
				                </span>
					            <div id="div_1_2" style="display: none">
					            <form action="/imgStorage/insert.json" method="post" id="id_1_2_insertForm" enctype="multipart/form-data" target="_black">
				                <input type="hidden" id="demo_num_1_2" name="demo_num" />
				                <input type="hidden" id="demo_templateId_1_2" name="tempId" />
				                <input type="hidden" id="demo_modelId_1_2" name="modelId" th:value="${modelId}"/>
				                <div class="box-content" style="padding:0px;">
					                <table class="table table-striped table-bordered bootstrap-datatable datatable">
					                    <thead>
					                    <tr>
					                    	<th class="center" style="width: 10%"> 序号</th>
					                        <th class="center" style="width: 25%"> 图片展示</th>
					                        <th class="center" style="width: 10%"> 点击数</th>
					                        <th class="center" style="width: 30%"> 简介</th>
					                        <th class="center" style="width: 15%"> 图片选择</th>
					                        <th class="center" style="width: 10%"> 图片上传</th>
					                    </tr>
					                    </thead>
					                    <tbody id="table_tbody_1_2">
					                    </tbody>
						                
					                </table>
					                <input type="button" onclick="insertOrUpdate(2)" class="btn btn-primary" value="保存" />
					            </div>
					            </form>
					            </div> 
							</div>
	
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
   <!--  <div id="showModel" class="modal hide fade in" style="display: none; width: 960px">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>模版展示</h3>
        </div>
				<div id="div_show" class="showshow"  style="width: 960px; height: 450px">
				</div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
    </div> -->
</div>
</body>
</html>
